<!-- 创建时间: 2021年06月06日 星期天 21:49 -->
<template>
    <div class='personalCenter_container'>
        <el-divider content-position="left">
            <el-tag type="danger"
                    v-if="flag">首次登录请务必修改密码！</el-tag>
            <span v-else>修改密码</span>
        </el-divider>
        <el-row>
            <el-col :md="12"
                    :offset="1">
                <span>姓名:</span>{{this.$store.getters.getUserName}} <br>
                <span>账号:</span>{{this.$store.getters.getUserNumber}} <br>
            </el-col>
        </el-row>
        <el-row>
            <el-col :md="12">
                <el-form :model="ruleForm"
                         status-icon
                         :rules="rules"
                         ref="ruleForm"
                         label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="原密码"
                                  prop="oldPass">
                        <el-input type="password"
                                  v-model="ruleForm.oldPass"
                                  autocomplete="off"
                                  show-password></el-input>
                    </el-form-item>
                    <el-form-item label="新密码"
                                  prop="newPass">
                        <el-input type="password"
                                  v-model="ruleForm.newPass"
                                  autocomplete="off"
                                  show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码"
                                  prop="checkPass">
                        <el-input type="password"
                                  v-model="ruleForm.checkPass"
                                  autocomplete="off"
                                  show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import md5 from "../../js/md5";
import JSEncrypt from "jsencrypt";
import JSEncryptLong from 'encryptlong'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        let validateOldPass = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入原密码'));
            } else {
                callback();
            }
        };
        let validateNewPass = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        let validateCheckPass = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.newPass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        //这里存放数据
        return {
            ruleForm: {
                oldPass: '',
                newPass: '',
                checkPass: '',
            },
            rules: {
                oldPass: [{
                    validator: validateOldPass,
                    trigger: 'blur'
                }],
                newPass: [{
                    validator: validateNewPass,
                    trigger: 'blur'
                }],
                checkPass: [{
                    validator: validateCheckPass,
                    trigger: 'blur'
                }],
            },
            flag: false,
        }
    },
    props: ['msg'],
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj = {
                        stuName: this.$store.getters.getUserName,
                        stuNumber: this.$store.getters.getUserNumber,
                        stuClass: '',
                        oldPass: this.ruleForm.oldPass,
                        newPass: this.ruleForm.newPass,
                    }
                    if (obj.stuNumber.length != 10) {
                        this.$message({
                            message: '身份信息错误!',
                            type: 'error'
                        });
                        return;
                    };

                    this.$http.get("getPubKey").then(pubKey => {
                        let encrypt = new JSEncrypt();
                        encrypt.setPublicKey(pubKey.bodyText);
                        let requestAdd = '';
                        if (this.msg == undefined) {
                            obj.stuClass = encrypt.encrypt(obj.stuNumber.substring(0, 7));
                        } else {
                            obj.stuClass = encrypt.encrypt(this.msg);
                        }
                        obj.stuNumber = encrypt.encrypt(obj.stuNumber);
                        obj.oldPass = encrypt.encrypt(md5(obj.oldPass));
                        obj.newPass = encrypt.encrypt(md5(obj.newPass));

                        this.$http.post("changePass", {
                            obj: JSON.stringify(obj)
                        }).then(res => {
                            if (res.body) {
                                sessionStorage.removeItem("token");
                                this.$router.push({
                                    name: "login",
                                    params: {
                                        status: "密码修改成功，请重新登录！",
                                        type: "success"
                                    }
                                })
                            } else {
                                this.$message({
                                    message: "密码修改失败，请稍后重试！",
                                    type: "error"
                                });
                            }
                        })

                    })

                } else {
                    return false;
                }
            });
        },
        resetForm (formName) {
            this.$refs[formName].resetFields();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.flag = !JSON.parse(sessionStorage.getItem('flag'));
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {

    },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
}
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.personalCenter_container {
    padding: 10px;
}
</style>
